<template>
	<div class="inner-container">
		<ul class="operateList">
			<li class="operateBtn" @click="Show(true,1)"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">新增</span></li>
			<li class="operateBtn" @click="Show(true,3)"><img src="../../../assets/img/eidt.png" height="20" width="20" /><span class="operateTitle">编辑</span></li>
			<!--<li class="operateBtn" @click="DeleteData()"><img src="../../../assets/img/delete.png" height="20" width="20" /><span class="operateTitle">删除</span></li>-->
		</ul>
		<queryFrom @Refresh="Refresh"></queryFrom>
		<el-table :data="menuList" class="table" highlight-current-row :height='tableHeight' @current-change="handleCurrentChange" style="width: 100%" height="700" border>
			<el-table-column label="名称" min-width="50%">
				<template scope="scope">
					<el-button :style="SetRowHeadLeft(scope.row)" @click="InsertTr(scope.$index, scope.row,scope)" type="text" showType="(0)" :class="scope.row.class">
					</el-button>
					{{ scope.row.name }}
				</template>
			</el-table-column>
			<el-table-column property="code" label="编码" min-width="50%" show-overflow-tooltip>
			</el-table-column>
			<el-table-column property="sort" label="排序" min-width="50%" show-overflow-tooltip>
			</el-table-column>
		</el-table>
		<el-dialog title="字典" v-model="dialogTableVisible" size="800px">
			<from @Show="Show" :btnType="btnType" :editData="editData" :parentId="parentId" :code="code" ref="form" @Refresh="Refresh"></from>
		</el-dialog>
		<pageBox :totalNum="totalNum" @Refresh='Refresh'></pageBox>
	</div>
</template>
<script>
	import from from './form/Form.vue'
	import queryFrom from './form/QueryForm.vue'
	import pageBox from '../../Common/Page1.vue'
	export default {
		mounted() {
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				//得到初始高度
				let contentHeight = $('.content').height(),
					wrapListHeight = $('.operateList').height(),
					warpBoxHigeht = $('.list').height();
				this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - 100;
				console.log(wrapListHeight, warpBoxHigeht, contentHeight, this.tableHeight)
				//计算显示高度
				var timer = null;
				$(window).resize(() => {
					clearTimeout(timer)
					timer = setTimeout(() => {
						let contentHeight = $('.content').height(),
							wrapListHeight = $('.operateList').height(),
							warpBoxHigeht = $('.list').height();
						this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - 100
					}, 200)
				})
			} else {
				this.tableHeight = "";
			}
		},
		components: {
			from: from,
			queryFrom: queryFrom,
			pageBox: pageBox
		},
		data() {
			return {
				menuList: [],
				selectedRow: null,
				dialogTableVisible: false,
				pageInfo: {
					page: 1,
					pageSize: 15
				},
				tableHeight: 600,
				queryInfo: {},
				totalNum: 0,
				btnType: -1, //1,新增根节点，2，新增子节点，3，编辑
				parentId: null,
				code:null,
				editData: null //编辑数据
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.selectedRow = val;
			},
			Show(showType, btnType) {
				if(btnType > 1) {
					if(this.selectedRow == null) {
						this.$message.error("请选择数据");
						return;
					} else if(this.selectedRow.childs) {
						this.$message.error("不能编辑类型，请选择子节点");
						return;
					} else if(btnType == 3) {
						this.SetFormData(btnType);
					}
					this.parentId = this.selectedRow.parentId;
					this.code=this.selectedRow.code;
				} else if(btnType ==1){
					if(this.selectedRow == null) {
						this.$message.error("请选择数据");
						return;
					} else if(!this.selectedRow.childs || this.selectedRow.childs.length == 0) {
						this.$message.error("请选择类型（根节点）");
						return;
					}
					this.parentId = this.selectedRow.id;
					this.code=this.selectedRow.code;
				}
				this.dialogTableVisible = showType;
				this.btnType = btnType;
			},
			Refresh(isRoot) {
				this.queryInfo.current = this.pageInfo.page;
				this.queryInfo.size = this.pageInfo.pageSize;
				this.ajax({
					url: 'tDictionary/page',
					data: this.queryInfo,
					success: function(data) {
						//this.tableData = data.records;
						if(data.total != this.totalNum) {
							this.totalNum = data.total;
						}

						this.menuList = [];

						this.HandleTreeGrid(data.records, this.menuList);
						console.log(this.menuList)

						this.menuList.forEach((item) => {
							item.class = this.GetIsOpenClass(item);
						});
					}
				})
			},
			HandleTreeGrid(treeNode, menuList) {
				for(var item of treeNode) {
					menuList.push(item);
					if(item.children && item.children.length > 0) {
						if(item.childs == undefined) {
							item.childs = [];
						}
						item.isOpen = true;
						item.children.forEach((node) => {
							item.childs.push(node);
						});
						this.HandleTreeGrid(item.children, menuList);
					}
				}
			},
			SetFormData() {
				this.ajax({
					url: 'tDictionary/selectDictionaryById?id=' + this.selectedRow.id,
					success: function(data) {
						this.editData = data;
					}
				})
			},
			DeleteData() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				} else if(this.selectedRow.childs && this.selectedRow.childs.length > 0) {
					this.$message({
						message: '根节点不可删除',
						type: 'warning'
					});
					return ;
				} else {
					this.$confirm('是否删除数据？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.ajax({
							url: 'tDictionary/deleteDictionary',
							type: 'post',
							data: {
								id: this.selectedRow.id
							},
							success: function(data) {
								this.Refresh();
							}
						});
					}).catch(() => {

					});

				}

			},
			InsertTr(index, row, scope) {
				if(!row.isOpen) {
					if(row.childs && row.childs.length > 0) {
						this.InsertChildTableData(index, row);
					}
				} else {
					if(row.childs) {
						if(row.childs.length > 0) {
							this.RemoveChildTableData(index, row);
						}
					}
				}
			},
			GetChild(index, row) {
				this.ajax({
					url: 'api/CommonDictionary/Query?IsRoot=false&parentId={0}'.format(row.id),
					data: {
						page: 1,
						pageSize: 999
					},
					success: function(data) {
						row.child = data.row;
						this.InsertChildTableData(index, row);
					}
				})
			},

			RemoveChildTableData(index, row) {
				let num = this.HandleRowChildCount(row);
				this.menuList.splice(index + 1, num);
				row.isOpen = false;
				row.class = this.GetIsOpenClass(row);
			},
			HandleRowChildCount(row) {
				if(row.childs != undefined && row.isOpen) {
					if(row.childs.length > 0) {
						let i = parseInt(row.childs.length)
						row.childs.forEach((item) => {
							i = i + this.HandleRowChildCount(item);
						});
						return i;
					} else {
						return 0;
					}
				} else {
					return 0;
				}

			},
			InsertChildTableData(index, row) {
				this.HandleAddChild(index, row);
				if(row.childs.length == 0) {
					row.hasChild = false;
				}
				row.isOpen = true;
				row.class = this.GetIsOpenClass(row);
			},
			HandleAddChild(index, row) {
				if(row.childs.length > 0) {
					row.childs.forEach((item, i) => {
						index = index + 1;
						this.menuList.splice(index, 0, item);
						if(item.isOpen && item.childs != undefined) {
							index = this.HandleAddChild(index, item);
						}
					})
					return index;
				}
			},

			SetRowHeadLeft(row) {
				return {
					'margin-left': ((parseInt(row.level) - 1) * 20) + 'px',
					'margin-right': ((parseInt(row.level)) * 5) + 'px'
				};
			},
			GetIsOpenClass(row) {
				if(row.hasChild) {
					return {
						'el-icon-arrow-down': row.isOpen != undefined && row.isOpen == true,
						'el-icon-arrow-right': row.isOpen == undefined || row.isOpen == false
					};
				} else {
					return {
						'iocClose': true
					};
				}
			},
			DataFormatter(row, column) {
				if(row.enable == null || !row.enable) {
					return "否";
				} else {
					return "是";
				}
			}
		},
		computed: {

		},
		watch: {},
		created() {
			this.Refresh();
		}

	}
</script>
<style scoped>
	.operateList {
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #eae9e9;
		font-size: 0;
	}
	
	.operateBtn {
		font-size: 14px;
		display: inline-block;
		vertical-align: top;
		height: 20px;
		line-height: 20px;
		border-right: 1px solid #ddd;
		padding: 0 10px;
		margin: 5px 0;
		text-align: center;
		cursor: pointer;
		color: #666;
	}
	
	.operateBtn:last-child {
		border-right: none;
	}
	
	.operateTitle {
		vertical-align: top;
		padding-left: 4px
	}
</style>